<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
</head>

<body>
    <ul id="repos"></ul>
    <script type="module">
        /* <script> */
        //http://api.github.com/users/yuan479/repos
        //前后端分离 js主动请求接口（异步任务）,拿到数据
        // xhr对象？
        //早期实现接口请求的对象，比fetch更老
        /*   const xhr = new XMLHttpRequest();//实例化
          console.log(xhr.readyState)
          //http请求 用的GET 用来打开一个数据传输的通道
          //底层 好理解 浏览器网络请求的通道被打开
          xhr.open('GET', 'http://api.github.com/users/yuan479/repos')
          console.log(xhr.readyState)
          xhr.send()//发送请求
          console.log(xhr.readyState)//拿到数据
          xhr.onreadystatechange = function () {//监听状态
              //为什么不用.then?  因为xhr是es6之前的技术，连promise都没有，自然没有then
              //onreadystatechange 一个事件监听的回调函数，在状态改变的时候触发
  
              console.log(xhr.readyState)//readyState 返回状态码 0-4
              if (xhr.readyState == 4) {
                  //响应到达了
                  //后端数据接口的格式是xml html是xml的一种格式 
                  // 比如：<song><author>林俊杰</author><title>江南<title></song>是一个xml但不是html
                  // JSON {author: '林俊杰', title: '江南'}
                  //console.log(xhr.responseText, typeof xhr.responseText)
  
                
           const data =JSON.parse(xhr.responseText)
                  document.getElementById('repos').innerHTML = 
                  data.map(item => `<li>${item.name}</li>`).join('')
              }
          } */

        //优化->模块化：
        // 共同点http xhr对象
        //区别 url 参数
        const getJSON = async (url) => {
            return new Promise((resolve, reject) => {
                //返回一个函数，立即运行 executor：执行器
                //开始处于padding状态

                const xhr = new XMLHttpRequest();//实例化
                console.log(xhr.readyState)
                //http请求 用的GET 用来打开一个数据传输的通道
                //底层 好理解 浏览器网络请求的通道被打开
                xhr.open('GET', 'http://api.github.com/users/yuan479/repos')
                console.log(xhr.readyState)
                xhr.send()//发送请求
                console.log(xhr.readyState)//拿到数据
                xhr.onreadystatechange = function () {//监听状态
                    //为什么不用.then?  因为xhr是es6之前的技术，连promise都没有，自然没有then
                    //onreadystatechange 一个事件监听的回调函数，在状态改变的时候触发

                    console.log(xhr.readyState)//readyState 返回状态码 0-4
                    if (xhr.readyState == 4) {
                        //响应到达了
                        //后端数据接口的格式是xml html是xml的一种格式 
                        // 比如：<song><author>林俊杰</author><title>江南<title></song>是一个xml但不是html
                        // JSON {author: '林俊杰', title: '江南'}
                        //console.log(xhr.responseText, typeof xhr.responseText)


                        /*   const data = JSON.parse(xhr.responseText)
                          document.getElementById('repos').innerHTML =
                              data.map(item => `<li>${item.name}</li>`).join('') */
                        resolve(JSON.parse(xhr.responseText))
                    }
                }
            })
        }
        (async () => {
            /*  const result = await getJSON('http://api.github.com/users/yuan479/repos') */
            //fullfilled 状态

            const data = await getJSON('http://api.github.com/users/yuan479/repos')
            //console.log(data)
            /* const data =JSON.parse(xhr.responseText) */
            document.getElementById('repos').innerHTML =
                data.map(item => `<li>${item.name}</li>`).join('')
        })()

    </script>
</body>

</html>